﻿<template>
  <div>
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = "page_secondMainContent clear" v-loading = 'loading'>
      <!-- 左侧表的树状列表 -->
      <div class = "page_leftContent">
        <!-- 检索部分 -->
        <div class = "page_leftSearchContent clear">
          <el-button @click = 'addMulti' type = 'primary' size='mini' :disabled = 'isEdit'><i class='iconfont icon-add'></i>多表功能</el-button>
          <div class = "page_leftSearchInput">
            <el-input  placeholder = "输入多表功能名称" v-model = "filterText" prefix-icon = "el-icon-search"></el-input>
          </div>
        </div>
        <!-- 下部功能列表 -->
        <div class = 'main_multi'>
          <ul class = 'multiList' v-if = 'totalMulti.length'>
            <li @click = "item.uid === currentMulti.uid ? '' : changeMulti(item)" v-for = 'item in filterMulti' :key='item.uid'
            :class = "item.uid === currentMulti.uid ? 'active' : ''">
              <span class = 'multiList_btns'>
                <el-button type = 'text' size = 'mini' title = '编辑' @click.stop = 'handleEditMulti(item)'>
                  <i class = 'iconfont icon-bianji'></i>
                </el-button>
                <el-button type = 'text' size='mini' title = '删除' @click.stop = 'handleDeleteMulti(item.uid)'>
                  <i class = 'iconfont icon-shanchu'></i>
                </el-button>
              </span>
              <div class = 'multiList_info' :title = "item.name">{{item.name}}</div>
            </li>
          </ul>
          <div v-if = '!totalMulti.length' class = 'noMulti'> 暂无多表功能的信息，请点击左上角按钮新增多表功能按钮</div>
          <div v-if = 'totalMulti.length && !filterMulti.length' class='noMulti'>没有找到符合要求的多表功能</div>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class = "page_rightContent">
        <el-form v-show='totalMulti.length || isEdit' :label-width='labelMultiWidth' class='main_modualMultiContent' :model='ruleForm' :rules='rules' ref='ruleForm'>
          <el-row>
            <el-col :span = '11'>
              <el-form-item label = "多表功能名称：" prop = 'name'>
                <el-input :disabled = '!isEdit' v-model = 'ruleForm.name' placeholder="请输入多表功能名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='11' :offset='2'>
              <el-form-item label = "关联主表名称:" prop = 'meta_name'>
                <el-input :disabled = '!isEdit' @focus = "isEdit ? selectRefMulti() : ''" v-model = 'ruleForm.meta_name' placeholder = "请选择关联的主表名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span = '11'>
              <el-form-item label = "功能Action授权：" prop='action_auth'>
                <el-input :disabled = '!isEdit' v-model='ruleForm.action_auth' placeholder = "请输入多表功能Action授权码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='11' :offset='2'>
              <el-form-item label='多表功能描述：'>
                <el-input :disabled = '!isEdit' v-model = 'ruleForm.desc' placeholder = "请输入多表功能描述"></el-input>
              </el-form-item>
            </el-col>
            <!-- 普通事件 -->
            <el-col>
              <span class='tableLabel'>普通事件：</span>
              <div class='tableContent'>
                <div class='page_tableContent'>
                  <div class = 'addBtn' v-show='isEdit'>
                    <p @click="addEventsColumn('events')"><i class='iconfont icon-add'></i>新增普通事件</p>
                  </div>
                  <el-table :data='ruleForm.events' style='width:100%' empty-text='暂无普通事件，请立即添加' border stripe>
                    <el-table-column align='center' label='事件编号' :render-header='handelHelp' label-class-name="请选择普通事件">
                      <template slot-scope='scope'>
                        <el-form-item :prop="'events[' + scope.$index + '].no'" :rules='rules.eventsName'>
                          <el-select :disabled='!isEdit' v-model="scope.row.no" @focus="getEventList('events', scope.row)"
                           @change="changeEvents(scope.$index, 'events')" placeholder="请选择事件" filterable>
                            <el-option v-for='(item, index) in eventsList' :key='index' :label="item.no" :value='item.no'></el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件名称'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.name}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件分类'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.category}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件类型'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.type}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件触发时机'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.at}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件描述'>
                       <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.desc}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width='70'>
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="handleDeleteEvents(scope.$index, 'events')"><i class='iconfont icon-shanchu'></i>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <!-- 查询条件信息 -->
            <el-col>
              <span class='tableLabel'>查询条件信息：</span>
              <div class='tableContent'>
                <div class='page_tableContent'>
                  <div class='addBtn' v-show='isEdit'>
                    <p @click='addSearchColumn'><i class='iconfont icon-add'></i>新增查询条件组</p>
                  </div>
                  <el-table :data='ruleForm.searchTable' style='width:100%' empty-text='暂无查询条件信息，请立即添加' border stripe>
                    <el-table-column align='center' label='查询条件描述' :render-header='handelHelp' label-class-name="查询条件组描述">
                      <template slot-scope='scope'>
                        <el-form-item :prop="'searchTable[' + scope.$index + '].search_desc'" :rules='rules.search_desc'>
                          <el-input :disabled='!isEdit' v-model="scope.row.search_desc" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='标签提示' :render-header='handelHelp' label-class-name="查询条件组标签提示说明">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.tips" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='80' label='是否必输' :render-header='handelHelp' label-class-name="表示该组查询条件是否为必输的">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-switch :disabled='!isEdit' v-model="scope.row.is_required"></el-switch>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='80' label='排序编号' :render-header='handelHelp' label-class-name="查询条件在页面展示的顺序">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.sort_num" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='100' label='备注' :render-header='handelHelp' label-class-name="查询条件的备注说明">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.memo" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='查询条件' width='80' :render-header='handelHelp' label-class-name="可以在该查询条件组增加更多的查询条件">
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="handleAddSearch(scope.$index, scope.row)"><i class='iconfont icon-add'></i>增加</el-button>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width='70'>
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="handleDeleteSearch(scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <!-- 栏位信息 -->
            <el-col>
              <span class='tableLabel'>栏位信息：</span>
              <div class='tableContent'>
                <div class='page_tableContent'>
                  <div class='addBtn' v-show='isEdit'>
                    <p @click='addColumn'><i class='iconfont icon-add'></i>新增栏位信息</p>
                  </div>
                  <el-table :data='ruleForm.columTable' style='width:100%' empty-text='暂无栏位信息，请立即添加' border stripe>
                    <el-table-column align='center' label='栏位名称' :render-header='handelHelp' label-class-name="从关联的元数据表总选择栏位，栏位名称不能为空">
                      <template slot-scope='scope'>
                        <el-form-item :prop="'columTable[' + scope.$index + '].column_name'" :rules='rules.columnName'>
                          <span v-if='!isEdit'>{{scope.row.column_name}}</span>
                          <el-select v-else v-model="scope.row.column_name" placeholder="请选择"
                          @focus='columnSelect(scope.row)' @change='columnSelectChange(scope.row, scope.$index)' filterable>
                            <el-option v-for='(item, index) in refTableColumns' :key='index'
                            :label="item.column_desc ? item.column_name + '(' + item.column_desc + ')' : item.column_name" :value="item.column_name"></el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='表头名称' :render-header='handelHelp' label-class-name="生成的表格时该栏位的表头名称">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.column_desc" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='最大长度' :render-header='handelHelp' label-class-name="允许该字段输入的最大长度，为空或负数时则不做限定">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.max_length" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='标签提示' :render-header='handelHelp' label-class-name="标签提示说明">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.tips" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='80' label='是否必输' :render-header='handelHelp' label-class-name="表示该栏位是否为必输的">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-switch :disabled='!isEdit' v-model="scope.row.check_required"></el-switch>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='正则检查' :render-header='handelHelp' label-class-name="对该栏位输入规则的正则表达式检查">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.check_regex" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='80' label='排序编号' :render-header='handelHelp' label-class-name="该栏位在表格中展示的顺序">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.sort_num" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' width='100' label='备注' :render-header='handelHelp' label-class-name="该栏位的备注说明">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-input :disabled='!isEdit' v-model="scope.row.memo" placeholder="请输入"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width='70'>
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="handleDeleteCloumn(scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <!-- 行事件 -->
            <el-col>
              <span class='tableLabel'>行事件：</span>
              <div class='tableContent'>
                <div class='page_tableContent'>
                  <div class='addBtn' v-show='isEdit'>
                    <p @click="addEventsColumn('rowEvents')"><i class='iconfont icon-add'></i>新增行(栏位)事件</p>
                  </div>
                  <el-table :data='ruleForm.rowEvents' style='width:100%' empty-text='暂无行事件，请立即添加' border stripe>
                    <el-table-column align='center' label='事件编号' :render-header='handelHelp' label-class-name="请选择行事件">
                      <template slot-scope='scope'>
                        <el-form-item :prop="'rowEvents[' + scope.$index + '].no'" :rules='rules.rowEventsName'>
                          <el-select :disabled='!isEdit' v-model="scope.row.no" @focus="getEventList('rowEvents', scope.row)"
                          @change="changeEvents(scope.$index, 'rowEvents')" placeholder="请选择事件" filterable>
                            <el-option v-for='(item, index) in rowEventsList' :key='index' :label='item.no' :value='item.no'></el-option>
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件名称'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.name}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件分类'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.category}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件类型'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.type}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件触发时机'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.at}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='事件描述'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.desc}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width='70'>
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="handleDeleteEvents(scope.$index, 'rowEvents')"><i class='iconfont icon-shanchu'></i>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <!-- 从表信息 -->
            <el-col>
              <span class='tableLabel'>从表信息：</span>
              <div class='tableContent'>
                <div class='page_tableContent'>
                  <div class='addBtn' v-show='isEdit'>
                    <p @click="addSubTabs"><i class='iconfont icon-add'></i>新增从表信息</p>
                  </div>
                  <el-table :data='ruleForm.sub_tables' style='width:100%' empty-text='暂无从表信息，请立即添加' border stripe>
                    <el-table-column align='center' label='从表名称'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.meta_name}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='从表描述'>
                      <template slot-scope='scope'>
                        <el-form-item><span>{{scope.row.meta_desc}}</span></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='与主表是否为1对多'>
                      <template slot-scope='scope'>
                        <el-form-item><el-switch :disabled='!isEdit' v-model='scope.row.is_n'></el-switch></el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='关联条件' :render-header='handelHelp' label-class-name="点击按钮查看或编辑详细的关联条件信息">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-button v-if='isEdit' type='text' @click="editRefCloumns(scope.$index, scope.row, 'edit')"><i class='iconfont icon-bianji'></i>编辑</el-button>
                          <el-button v-else type='text' @click="editRefCloumns(scope.$index, scope.row, 'show')"><i class='iconfont icon-yanj'></i>查看</el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='栏位信息' :render-header='handelHelp' label-class-name="点击按钮查看或编辑详细的栏位信息">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-button v-if='isEdit' type='text' @click="editSubColumns(scope.$index, scope.row, 'edit')"><i class='iconfont icon-bianji'></i>编辑</el-button>
                          <el-button v-else type='text' @click="editSubColumns(scope.$index, scope.row, 'show')"><i class='iconfont icon-yanj'></i>查看</el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='普通事件' :render-header='handelHelp' label-class-name="点击按钮查看或编辑详细的普通事件信息">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-button v-if='isEdit' type='text' @click="editSubEvents(scope.$index, scope.row, 'events', 'edit')"><i class='iconfont icon-bianji'></i>编辑</el-button>
                          <el-button v-else type='text' @click="editSubEvents(scope.$index, scope.row, 'events', 'show')"><i class='iconfont icon-yanj'></i>查看</el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align='center' label='行事件' :render-header='handelHelp' label-class-name="点击按钮查看或编辑详细的行事件信息">
                      <template slot-scope='scope'>
                        <el-form-item>
                          <el-button v-if='isEdit' type='text' @click="editSubEvents(scope.$index, scope.row, 'row_events', 'edit')"><i class='iconfont icon-bianji'></i>编辑</el-button>
                          <el-button v-else type='text' @click="editSubEvents(scope.$index, scope.row, 'row_events', 'show')"><i class='iconfont icon-yanj'></i>查看</el-button>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label='操作' width='70'>
                      <template slot-scope="scope">
                        <el-button :disabled='!isEdit' type='text' @click="removeSubTabs(scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
            <!-- 底部的按钮 -->
            <div class='page_bottomContent' v-show="isEdit">
              <div class='page_btnsContent'>
                <el-form-item class="form_noLeftMargin">
                  <div>
                    <el-button  type="primary" @click="resetForm ('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm ('ruleForm')">确 定</el-button>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-row>
        </el-form>
        <div v-show='!totalMulti.length && !isEdit' class='noMulti'>
          暂无动态功能的信息，请点击左上角按钮新增动态功能按钮
        </div>
      </div>
    </div>
    <!-- 新增多表功能设定的弹窗 -->
    <V-Add :showAddDialog = 'showAddDialog' @successAdd = 'successAdd' @failedAdd = 'failedAdd'></V-Add>
    <!-- 获取关联的元数据表 -->
    <V-Ref-Table :showRefDialog = 'showRefDialog' :checkedUid = 'ruleForm.meta_uid' :refDialogType = 'refDialogType' :editableTabs = 'ruleForm.sub_tables' :totalRefTable = 'totalRefTable' @sureSelectRef = 'sureSelectRef' @giveUpRef = 'giveUpRef'></V-Ref-Table>
    <!-- 新增查询条件的子条件的弹窗 -->
    <V-Search-Item :showAddSearchDialog = 'showAddSearchDialog' :metaUid = 'ruleForm.meta_uid' :searchList = 'searchList' :searchColumnList = 'searchColumnList' @successSearch = 'successSearch' @giveUpSearch = 'giveUpSearch'></V-Search-Item>
    <!-- 选择关联条件的弹窗 -->
    <V-Ref-Columns :showRefCloumsDialog = 'showRefCloumsDialog' :refCloumsList = 'refCloumsList' @giveUpRefCloumns = 'showRefCloumsDialog = false' @successRefCloumns = 'successRefCloumns'></V-Ref-Columns>
    <!-- 选择从表的字段信息 -->
    <V-Sub-Columns :showSubCloumsDialog = 'showSubCloumsDialog' :subCloumsList = 'subCloumsList' @giveUpSubCloumns = 'showSubCloumsDialog = false' @successSubCloumns = 'successSubCloumns'></V-Sub-Columns>
    <!-- 选择从表的事件信息 -->
    <V-Select-Events :showEventsDialog = 'showEventsDialog' :eventsFromParent = 'eventsFromParent' @giveUpEvents = 'showEventsDialog = false' @successEvents = 'successEvents'></V-Select-Events>
  </div>
</template>

<script src='./maintainMulti.js'></script>
